import React, { PureComponent } from 'react'

import classNames from 'classnames'

import { Row, Col, Card, Timeline, Avatar, Icon } from 'antd';

import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import styles from './Workplace.less';

class Workplace extends PureComponent {
  render() {
    const pageHeaderContent = (
      <div className={styles.pageHeaderContent}>
        <div className={styles.avatar}>
          <Avatar size="large" src="/avatar.jpg" className="App-logo" />
        </div>
        <div className={styles.content}>
          <div className={styles.contentTitle}>
              Hello，
              程序猿
              ，祝你开心每一天！
          </div>
          <div>
              全栈工程师
          </div>
        </div>
      </div>
    )

    return (
      <PageHeaderWrapper
        content={pageHeaderContent}
      >
        <Col xl={16} lg={24} md={24} sm={24} xs={24}>
          <Card
            bordered={false}
            title="动态"
          >
            <Timeline>
              <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: 16 }} />}> 七牛云存储 CDN</Timeline.Item>
              <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: 16 }} />}> SQL读写分离及定时器</Timeline.Item>
              <Timeline.Item color="green">增加 Redis高速缓存</Timeline.Item>
              <Timeline.Item color="red">
                增加服务器剪裁上传及水印
              </Timeline.Item>
              <Timeline.Item>
                <p>初始化</p>
              </Timeline.Item>
            </Timeline>
          </Card>
        </Col>
      </PageHeaderWrapper>
    )
  }
}

export default Workplace